<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap样式文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    <!-- bootstrap-table样式文件 -->
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css" />
    <!-- jquery -->
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <!-- bootstrap的js文件 -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <!-- bootstrap-table的js文件 -->
    <script type="text/javascript" src="../bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <style type="text/css">
        .rr {
            text-align: right;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // alert("测试jquery");
            //初始化表格
            //通过jquery选择器，选中表格，调用表格对象中方法（插件名）,方法内填入表格的选项（json格式的选项）
            $("#tab").bootstrapTable({
                //表格高度
                height: 480,
                //表格样式
                // classes: "table table-bordered table-hover table-striped",
                //行样式
                rowStyle: function (row, index) {
                    return {
                        css : {
                            color: "blue"
                        }
                    };
                },
                //表格数据为null值时显示的文本
                undefinedText: "-",
                //搜索框
                search: false,
                searchOnEnterKey:true,
                //禁用模糊查询
                strictSearch:false,
                trimOnSearch:false,
                //搜索框对其方式
                searchAlign: "right",
                //显示表头
                showHeader: true,
                //显示表足
                showFooter: false,
                //显示所有列的控制按钮，通过此按钮用户可隐藏部分列
                showColumns: true,
                //隐藏列时，最小显示的列数
                minimumCountColumns:2,
                //显示刷新按钮
                showRefresh:true,
                //表格视图与卡片视图切换
                showToggle:true,
                //全屏显示按钮
                showFullscreen: true,
                //点击行选中复选框
                clickToSelect: true,
                //表格数据的单选
                singleSelect: false,
                //表格的工具栏
                toolbar: "#tb",
                //访问远程数据
                // url: "../js/server.json",
                url: "../findUsers",
                method: "get",
                //发送远程请求时提交数据
                queryParams: function(param){
                    // param["username"]="zhangsan";
                    // alert(JSON.stringify(param));
                    //当前开启服务端分页后，bootstrap-table会向后台发送两个请求参数
                    //1.offset起始偏移量 2.limit每页条数
                    return {
                        "page": param.offset / param.limit + 1,
                        "pageSize": param.limit
                    };
                },
                //开启分页
                pagination: true,
                //分页循环
                paginationLoop: false,
                //设置客户端分页或服务端分页
                //如果是客户端分页，数据就是json数组
                //如果是服务端分页，数据是json对象，对象中的数据total表示总记录数，rows表示当前页面的数据
                sidePagination: "server",
                //默认加载分页数据页面数
                pageNumber: 1,
                //默认每页条数
                pageSize: 5,
                //设置默认条数选项
                pageList: [5,10,15,20],
                //分页对其方式
                paginationHAlign: "left",
                paginationDetailHAlign: "right",
                paginationVAlign: "both",
                //更改分页按钮文本
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //更改服务端分页响应数据中的json的总记录数据名称
                // totalField: "maxCount",
                //更改服务端分页响应数据中的json的当前页数据名称
                // dataField: "list",
                //列的描述,每一列的描述都是一个json对象
                columns: [
                    {
                        checkbox: true
                    },{
                        field : "id",
                        visible: false
                    },{
                        field : "username",
                        title: "用户名",
                        halign: "center"
                    },{
                        field : "password",
                        title: "密码",
                        halign: "center"
                    },{
                        field : "realname",
                        title: "真实姓名",
                        halign: "center"
                    }
                ]
                // columns: [
                //     {
                //         //行中的复选框
                //         checkbox: true
                //     },{
                //         //json数据中的key
                //         field : "id",
                //         //表头的文本
                //         // title: "编号"
                //         //隐藏列
                //         visible: false
                //     },{
                //         field : "name",
                //         title: "姓名",
                //         //表头，表体中数据的对其方式
                //         // align: "center"
                //         //表头中数据的对其方式
                //         halign: "center"
                //     },{
                //         field : "age",
                //         title: "年龄",
                //         halign: "center",
                //         cellStyle: function (value,row) {
                //             if(value>20){
                //                 return {}
                //             }
                //             return {
                //                 css : {
                //                     "background-color" : "red"
                //                 }
                //             }
                //         }
                //     },{
                //         field : "gender",
                //         title: "性别",
                //         halign: "center",
                //         //对数据进行格式化
                //         formatter : function (value,row) {
                //             // alert(JSON.stringify(row));
                //             return value=="M"?"男性":"女性";
                //         }
                //     }
                // ]//,
                //本地数据
                // data: [
                //     {"id":1001,"name":"小明","age":20,"gender":"M"},
                //     {"id":1002,"name":"小红","age":21,"gender":"F"},
                //     {"id":1003,"name":"小丽","age":22,"gender":"F"},
                //     {"id":1004,"name":"阿牛","age":26,"gender":"M"},
                //     {"id":1005,"name":"张三","age":34,"gender":"M"},
                //     {"id":1006,"name":"李四","age":12,"gender":"F"},
                //     {"id":1007,"name":"王五","age":28,"gender":"M"},
                //     {"id":1008,"name":"杰瑞","age":20,"gender":"M"},
                //     {"id":1009,"name":"汤姆","age":20,"gender":"M"},
                //     {"id":1010,"name":"克里斯","age":20,"gender":"F"},
                //     {"id":1011,"name":"露丝","age":20,"gender":"F"},
                //     {"id":1012,"name":"杰克","age":20,"gender":"M"},
                //     {"id":1013,"age":20,"gender":"M"}
                // ]
            });
        });
    </script>
</head>
<body>
    <div class="panel-body">
        <h2>表格</h2>
        <form id="tb" class="form-inline">
            <div class="btn-group">
                <button type="button" class="btn btn-default">新增</button>
                <button type="button" class="btn btn-info">修改</button>
                <button type="button" class="btn btn-danger">删除</button>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="username" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" id="realname" placeholder="真实姓名">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">搜索</button>
            </div>
        </form>

        <table id="tab" class="table table-bordered table-hover table-striped"></table>
    </div>
</body>
</html>